<template>
    <div class="content">
        <div class="itemCard">
            <div class="flex_layout">
                <div class="flex_1">
                    <p class="titleP">用户信息</p>
                    <div class="">ID: {{info.a.id}}</div>
                    <div class="">用户标签: {{info.a.id}}</div>
                    <div class="">注册时间: {{info.a.id}}</div>
                    <div class="">注册手机号码: {{info.a.id}}</div>
                </div>
                <div class="flex_1">
                    <p class="titleP">个人资料</p>
                    <div class=""> 用户姓名: {{info.a.id}} </div>
                    <div class=""> 联系电话: {{info.a.id}} </div>
                    <div class=""> 性别: {{info.a.id}} </div>
                    <div class=""> 出生日期: {{info.a.id}} </div>
                    <div class=""> 联系地址: {{info.a.id}} </div>
                    <div class=""> 情感状态: {{info.a.id}} </div>
                </div>
                <div class="flex_1">
                    <p class="titleP">咨询原因</p>
                    <div class=""> 是否有过精神科相关诊断或治疗: {{info.a.id}} </div>
                    <div class=""> 诊断结果或治疗建议详情: {{info.a.id}} </div>
                    <div class=""> 是否有过自伤/自杀的想法或行为: {{info.a.id}} </div>
                    <div class=""> 自杀/自残的行为或计划: {{info.a.id}} </div>
                    <div class=""> 是否有过心理咨询经历: {{info.a.id}} </div>
                    <div class=""> 主要困扰: {{info.a.id}} </div>
                    <div class=""> 简述咨询原因: {{info.a.id}} </div>
                </div>
                <div class="flex_1">
                    <p class="titleP">紧急联系人信息</p>
                    <div class=""> 紧急联系人姓名: {{info.a.id}} </div>
                    <div class=""> 紧急联系人手机号: {{info.a.id}} </div>
                    <div class=""> 关系: {{info.a.id}} </div>
                </div>
            </div>
            <div class="flex_layout">
                <div class="flex_1">
                    <p class="titleP">备注信息</p>
                    <el-input
                        v-model="info.b.remarks"
                        :rows="4"
                        type="textarea"
                        placeholder=""
                        maxlength="500"
                        show-word-limit
                    />
                    <div class="rightFloat u_mt_10">
                        <el-button  type="primary" v-if="!remarksEditFlag" @click="remarksEdit">修改</el-button>
                        <el-button  v-if="remarksEditFlag" @click="remarksEditCancel">取消</el-button>
                        <el-button  type="primary"  v-if="remarksEditFlag" @click="remarksEditCommit">提交</el-button>
                    </div>

                </div>
            </div>
            
            <div class="flex_layout">
                <div class="flex_1">
                    <p class="titleP">咨询记录（{{info.a.consTimes}}）次</p>
                    <div style="width: 600px">
                        <el-table :data="info.d.list" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                            <el-table-column
                                align="center"
                                :prop="item.name"
                                :label="item.label"
                                v-for="(item, index) in tableHeader"
                                :key="index"
                                :width="item.width"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="flex_layout">
                <div class="flex_1">
                    <p class="titleP">危机个案</p>
                    <div style="width: 600px">
                        暂无信息
                    </div>
                </div>
            </div>
            <div class="flex_layout">
                <div class="flex_1">
                    <p class="titleP">浏览记录</p>
                    <div class="">
                        ID: {{info.a.id}}
                    </div>
                </div>
            </div>
        </div>

        <div class="footerBtn">
            <el-button>取消</el-button>
            <el-button  type="primary">提交</el-button>
        </div>
    </div>
    
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import { Module } from 'vuex';
import PHONENUMBERINPUT from '../../components/phoneNumberChoose/index.vue'



const name = ref('')

let info = ref({
    a: {
        name: '',
        sex: 1,
        phoneNumber: '139088888888',
        countryCode: '+86',
        affective: 1,
        birth: '',
        city: '',
        address: '',
        id: '90551',
        consTimes: 3

    },
    b: {
        isDiagnosis: 0,
        isSuicide: 0,
        isConsult: 0,
        worry: [],
        worryList: [],
        reason: '',
        remarks: '',
    },
    c: {
        name: '',
        phone: '',
        relationship: 0
    },
    d: {
        list: [
            {
                name: '马文慧',
                time: '2022-12-01 14:56:28',
                style: '视频咨询',
            },
            {
                name: '马文慧',
                time: '2022-12-01 14:56:28',
                style: '视频咨询',
            },
            {
                name: '马文慧',
                time: '2022-12-01 14:56:28',
                style: '视频咨询',
            },
        ]
    }

})
const oldRemarks = ref('');
const remarksEditFlag = ref(false);
const tableHeader = [
            {
                label:"咨询师名字",
                width: 120,
                name:"name",
            },
            {
                label:"咨询方式",
                width: 120,
                name:"style",
            },
            {
                label:"实际完成时间",
                width: '',
                name:"time",
            },
        ]
const affectiveList = [
    {value:1,name:'单身'},
    {value:2,name:'恋爱中'},
    {value:3,name:'已婚'},
    {value:4,name:'离异'},
    {value:5,name:'丧偶'},
    {value:6,name:'其他'}
];
const worryList = [
    {value: 1, name: '情绪管理'},
    {value: 2, name: '亲密关系'},
    {value: 3, name: '婚姻家庭'},
    {value: 4, name: '亲子教育'},
    {value: 5, name: '个人成长'},
    {value: 6, name: '身心健康'},
    {value: 7, name: '职场问题'},
    {value: 8, name: '人际关系'},
    {value: 9, name: '其他'},
    {value: 10, name: '性心理'},
    {value: 11, name: '儿童青少年'},
    {value: 12, name: '心理创伤'},

];
/* 备注信息修改 */
const remarksEdit = () => {
    remarksEditFlag.value = true;
    oldRemarks.value = info.value.b.remarks;
}
const remarksEditCancel = () => {
    remarksEditFlag.value = false;
    info.value.b.remarks = oldRemarks.value;
}
const remarksEditCommit = () => {
    remarksEditFlag.value = false;
    // 提交备注修改

}

</script>


<style scoped lang="scss">
.content{
    padding: 10px 10px 20px;
    box-sizing: border-box;
    background: #eeeeee;
    overflow-y: scroll;
    .itemCard{
        padding: 0 10px 40px;
        margin-bottom: 20px;
        background: #ffffff;
        line-height: 30px;
        font-size: 16px;
        text-indent: 20px;
        .titleP{
            font-size: 18px;
            font-weight: bolder;
            line-height: 60px;
            width: 100%;
        }
        .el-checkbox{
            margin-bottom: 10px;
        }
        .el-input{
            width: 100%!important;
        }
    }
   
    .footerBtn{
        text-align: center;
        padding-bottom: 10px;
    }
}
    
</style>
